<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Database List</title>
	<link rel="stylesheet" type="text/css" href="../css/easyui.css">
	<link rel="stylesheet" type="text/css" href="../css/pagestyle.css">
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
	<div id="el" class="easyui-layout" data-options="fit:true,border:false">  
		<!-- 北 -->
		<div id="layout_north" data-options="region:'north',border:false">
			<h1>Auto Database</h1>
		</div>
		<!-- 西 -->
		<div id="layout_west" data-options="region:'west',split:true,title:'Database List'">
			<ul id="dblist"></ul>
			<div id="dbmenu" class="easyui-menu" style="width:120px;">
				<div onclick="newDBFactoryItem()" data-options="iconCls:'icon-add'">New Database Factory</div>
				<div onclick="detailDBFactoryItem()" data-options="iconCls:'icon-remove'">Detail</div>
				<div onclick="deleteDBFactoryItem()" data-options="iconCls:'icon-remove'">Delete</div>
				<div class="menu-sep"></div>
				<div onclick="expand()">Expand</div>
				<div onclick="collapse()">Collapse</div>
			</div>
			<script type="text/javascript">
				var tree;
	
				$(function() {
					tree = $('#dblist').tree({
						url : "${pageContext.request.contextPath}/DBFactoryServer?op=readFactoryItem",
						parentField : 'id',
						lines : true,
						onClick : function(node) {
							alert(node.text);
						},
						onBeforeExpand : function(node) {
							alert(node.text);
						},
						onContextMenu: function(e,node){
							e.preventDefault();
							$(this).tree('select', node.target);
		
							$('#dbmenu').menu('show',{
								left: e.pageX,
								top: e.pageY
							});
						}
					});
				});
				
				function newDBFactoryItem() {
					var westpanel = $("#layout_center").panel({region:'center', 
						href:'${pageContext.request.contextPath}/page/newDatabaseFactory.jsp'});
					
					var panel = $('#el').layout('panel','center');
					$.center_panel = panel;
					$.center_panel.factory_tree = tree;
				}
				
				function detailDBFactoryItem() {
					var snode = tree.tree("getSelected");
					var href = "${pageContext.request.contextPath}/DBFactoryServer?op=detailFactoryItem&key=" + snode.attributes['key'];
	
					var westpanel = 
						$("#layout_center").panel({
							region:'center', 
							href: href
						});
					
					var panel = $('#el').layout('panel','center');
					$.center_panel = panel;
					$.center_panel.factory_tree = tree;
				}
				
				function deleteDBFactoryItem() {
					var snode = tree.tree("getSelected");
					var href = "${pageContext.request.contextPath}/DBFactoryServer?op=deleteDBFactory&key=" + snode.attributes['key'];
					
					if(confirm("是否删除?")) {
						var url = href;
		
						$.post(
							url,
							{tname:snode.text},
							function(result){
						   		tree.tree("reload");
							}
						);
					}
				}
			</script>
		</div>
		<!-- 东 -->
		<div id="layout_east" data-options="region:'east',split:true,collapsed:true,title:'East'">
		</div>
		<!-- 南 -->
		<div id="layout_south" data-options="region:'south',border:false">
			Auto Database Design By Hunk
		</div>
		<!-- 中 -->
		<div id="layout_center" data-options="region:'center',title:'Center'">
		</div>
	</div>
</body>
</html>